<template>
  <div class="add-popover">
      <div class="increase" v-if="showPopover">
        <el-form ref="ruleForm">
            <h1>{{title}}</h1>
            <el-form-item :label="first" style="margin-bottom: 20px;" v-if="type === 'role' || 'department' || 'fcn'">
                <el-input v-model="nameValue"></el-input>
            </el-form-item>
             
            <div class="item-style" v-if="type === 'fcn' ">
                <el-form-item label="功能链接" style="margin-bottom: 20px;">
                    <el-input v-model="funcUrl"></el-input>
                </el-form-item>
            </div>
            <!-- <div class="item-style-b" v-if="type === 'fcn'">
                <el-form-item label="备注" style="margin-bottom: 20px;">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
            </div> -->
            <el-form-item style="margin-top: 40px;">
                <el-button type="primary" @click="saveDepartment">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>
import { addRole, updateRole, updateDeptName } from '../../public/js/setting'
export default {
  name: 'addPopover',
  data () {
    return {
      title: '',
      type: '',
      first: '',
      showPopover: '',
      second: '',
      select: '',
      funcUrl: '',
      receptionForm: [],
      nameValue: '',
      ruleForm: {
        content: []
      },
      url: '',
      id: ''
    }
  },
  mounted () {
    window.bus.$on('showPopover', val => {
      this.nameValue = ''
      this.title = val.title || ''
      this.first = val.first || ''
      this.second = val.second || ''
      this.type = val.type || ''
      this.showPopover = val.show || false
      this.num = val.num || ''
      this.id = val.id || ''
      this.select = val.select || []
      for (let i in val.form) {
        this.receptionForm.push(i)
      }
    })
  },
  methods: {
    saveDepartment () {
      if (this.num === 'addRole') {
        addRole(this).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('添加成功')
            this.showPopover = false
            window.bus.$emit('PermissiinsData', res.data)
          }
        })
      } else if (this.num === 'editRole') {
        updateRole(this).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('角色名称修改成功')
            this.showPopover = false
            window.bus.$emit('PermissiinsData', res.data)
          }
        })
      } else if (this.num === 'addSubsector') {
        updateDeptName(this, 0, -1).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('部门添加成功')
            this.showPopover = false
            window.bus.$emit('departMentBackData', res.data.adminDepartments)
          }
        })
      } else if (this.num === 'addChildSubsector') {
        updateDeptName(this, this.id, -1).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('子部门添加成功')
            this.showPopover = false
            window.bus.$emit('departMentBackData', res.data.adminDepartments)
          }
        })
      } else if (this.num === 'editSubsector') {
        updateDeptName(this, '', this.id).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('部门修改成功')
            this.showPopover = false
            window.bus.$emit('departMentBackData', res.data.adminDepartments)
          }
        })
      }
      // else if (this.num === 'addDepartment') {
      //   const data = Object.assign({}, window.commo.defaultValue, {name: this.nameValue, id: 0, functionId: '', url: '', iconUrl: '', orderNum: 0})
      //   this.$http.post('menu/addname?token=' + window.commo.token, data).then(res => {
      //     if (res.data.errCode === 0) {
      //       this.$message.success('菜单添加成功')
      //       this.showPopover = false
      //       window.bus.$emit('addBackData', res.data.suppliersMenus)
      //     }
      //   })
      // } else if (this.num === 'editMenu') {
      //   const data = Object.assign({}, window.commo.defaultValue, {name: this.nameValue, id: this.id, functionId: '', url: '', iconUrl: '', orderNum: 0})
      //   this.$http.post('menu/updatename?token=' + window.commo.token, data).then(res => {
      //     if (res.data.errCode === 0) {
      //       this.$message.success('菜单修改成功')
      //       this.showPopover = false
      //       window.bus.$emit('addBackData', res.data.suppliersMenus)
      //     }
      //   })
      // } else if (this.num === 'addFunction') {
      //   const data = Object.assign({}, window.commo.defaultValue, {name: this.nameValue, id: this.id, functionId: '', url: this.funcUrl, iconUrl: '', orderNum: 0})
      //   this.$http.post('menu/addname?token=' + window.commo.token, data).then(res => {
      //     if (res.data.errCode === 0) {
      //       this.$message.success('功能添加成功')
      //       this.showPopover = false
      //       window.bus.$emit('addBackData', res.data.suppliersMenus)
      //     }
      //   })
      // } else if (this.num === 'addChildMenu') {
      //   const data = Object.assign({}, window.commo.defaultValue, {name: this.nameValue, id: this.id, functionId: '', url: '', iconUrl: '', orderNum: 0})
      //   this.$http.post('menu/addname?token=' + window.commo.token, data).then(res => {
      //     if (res.data.errCode === 0) {
      //       this.$message.success('子菜单添加成功')
      //       this.showPopover = false
      //       window.bus.$emit('addBackData', res.data.suppliersMenus)
      //     }
      //   })
      // }
    },
    cancel () {
      this.showPopover = false
    }
  }
}
</script>

<style lang="scss">
.increase {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    background: white;
    z-index: 3;
    padding: 20px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
    h1 {
        text-align: left;
        margin-bottom: 10px;
    }
    .el-form-item {
        .el-form-item__content {
            text-align: left;
            .el-input {
                width: 300px;
            }
        }
    }
}
.el-select, .el-cascader {
    display: inline-block;
}
.item-style {
    padding: 20px 0 0 10px;
}
.item-style-b {
    padding: 10px 0 0 40px;
}
//2560像素的样式
@media screen and (min-width:1920px) and (max-width:2560px){
  .increase{
      width: 98.2%;
  }
}
</style>

